import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  data: {
    type: Array,
    default: [],
    require: true
  }
} as const


// 定义主体
export default defineComponent({
  props: PropsType,

  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    let options = {}
    watch(
      () => props.data,
      (val: any) => {
        //

        options = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.2)',
            textStyle: {
              color: "#fff"
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['鲜食玉米', '籽粒玉米', '青贮玉米'],
            align: 'left',
            right: 0,
            top: 2,
            textStyle: {
              color: "rgba(255,255,255,0.9)"
            },
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 25,
            // icon: 'path://M961.3,130.5c-165.8-0.7-315.7,98.6-379.7,251.6c-64,153-29.4,329.4,87.6,447c117,117.5,293.3,152.9,446.6,89.6C1269,855.5,1369,706,1369.1,540.2C1369.3,314.6,1186.9,131.3,961.3,130.5L961.3,130.5zM961.3,740.5c-106.9,0-193.9-89.9-193.9-200.2c0-110.3,87-200.2,193.9-200.2c106.9,0,194,89.8,194,200.2S1068.1,740.5,961.3,740.5L961.3,740.5z M961.3,740.5'
          },
          grid: {
            top: '20%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['敖勒召其镇',
              '上海庙',
              '城川镇',
              '昂素镇',
            ],
            axisLine: {
              show: false,
              lineStyle: {
                color: "#063374",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 14
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 14
              }
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#063374",
                width: 1,
                type: "solid"
              },
            },
            splitNumber: 4,
            splitLine: {
              lineStyle: {
                color: "#063374",
                type: "dashed"
              }
            }
          }],
          series: [{
            name: '鲜食玉米',
            type: 'bar',
            data: [40, 40, 40, 40],
            barWidth: 14, //柱子宽度
            barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00FFB4'
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 255, 0.1)',
                }]),
                opacity: 1,
                barBorderRadius: [8, 8, 0, 0],
              }
            }
          }, {
            name: '籽粒玉米',
            type: 'bar',
            data: [40, 40, 40, 40],
            barWidth: 14,
            barGap: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#0291FF'
                }, {
                  offset: 1,
                  color: 'rgba(12, 135, 230, 0.1)'
                }]),
                opacity: 1,
                barBorderRadius: [8, 8, 0, 0],
              }
            }
          }, {
            name: '青贮玉米',
            type: 'bar',
            data: [20, 20, 20, 20],
            barWidth: 14,
            barGap: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FEC060'
                }, {
                  offset: 1,
                  color: 'rgba(254, 192, 96, 0.1)'
                }]),
                opacity: 1,
                barBorderRadius: [8, 8, 0, 0],
              },

            }
          }]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "152px"
      const width = "432px"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

